<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.css</title>
<meta name="generator" content="KF5::SyntaxHighlighting (CSS)"/>
</head><body style="color:#1f1c1b"><pre>
<span style="color:#898887;">/**</span>
<span style="color:#898887;"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span>
<span style="color:#898887;"> */</span>

<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;othersheet.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span>, tv;

body {
	<span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">pt</span>;
	<span style="font-weight:bold;">font-family</span>: Verdana, Helvetica, <span style="color:#bf0303;">&quot;Bitstream Vera Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>;
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;			<span style="color:#898887;">/* yet another comment */</span>
	<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
	<span style="color:#bf0303;text-decoration:underline;">// this is no comment, it's just broken!</span>
	<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
	<span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
}

<span style="color:#644a9b;">.something</span>
{
	<span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#cdd</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#AAFE04</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">43</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>;
	<span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">maroon</span>;
}

a<span style="color:#b08000;font-style:italic;">:hover</span> {
}

<span style="color:#006e28;font-weight:bold;">#header</span>,
p<span style="color:#644a9b;">.intro</span><span style="color:#b08000;font-style:italic;">:first-letter</span>,
p<span style="color:#b08000;font-style:italic;">:lang(nl)</span>,
img<span style="color:#0095ff;font-weight:bold;">[align</span>=<span style="color:#bf0303;">&quot;right&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>
{
	<span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> Qt::<span style="color:#aa5500;">red</span> <span style="color:#0057ae;">!important</span>;
	<span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>; <span style="color:#898887;">/* unknown properties render italic */</span>
}

<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {

	<span style="color:#006e28;font-weight:bold;">#header</span>
	{
		<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
	}

}

<span style="color:#898887;">/*</span>
<span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;">: add more tests, e.g. media</span>
<span style="color:#898887;">*/</span>


<span style="color:#644a9b;">.nice-look</span> {
	<span style="font-weight:bold;">font-variant-alternates</span>: styleset<span style="color:#644a9b;">(</span>nice-style<span style="color:#644a9b;">)</span>;
}

ul {
	<span style="font-weight:bold;">list-style</span>: thumbs;
}

<span style="color:#898887;">/* SVG &lt;a&gt; */</span>
svg|a {}

<span style="color:#898887;">/* XHTML and SVG &lt;a&gt; */</span>
*|a {}

*{}
<span style="color:#644a9b;">.class</span>{}
<span style="color:#006e28;font-weight:bold;">#id</span>{}
<span style="color:#b08000;font-style:italic;">:hover</span>{}
<span style="color:#b08000;font-style:italic;">:lang(fr)</span>{}
E{}
E F{}
E&gt;F{}
E &gt; F{}
E~F{}
E ~ F{}
E<span style="color:#b08000;font-style:italic;">:first-child</span>{}
E<span style="color:#b08000;font-style:italic;">:visited</span>{}
E<span style="color:#b08000;font-style:italic;">::after</span>{}
E<span style="color:#b08000;font-style:italic;">:lang(c)</span>{}
E<span style="color:#b08000;font-style:italic;">:lang(fr-ca)</span>{}
E + F{}
E+F{}
E<span style="color:#0095ff;font-weight:bold;">[foo]</span>{}
E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">warning</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
E<span style="color:#0095ff;font-weight:bold;">[foo</span>~=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
E<span style="color:#0095ff;font-weight:bold;">[foo</span>^=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
E<span style="color:#0095ff;font-weight:bold;">[foo</span>$=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
E<span style="color:#0095ff;font-weight:bold;">[foo</span>*=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
E<span style="color:#0095ff;font-weight:bold;">[lang</span>|=<span style="color:#bf0303;">&quot;en&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
DIV<span style="color:#644a9b;">.warning</span>{}
DIV <span style="color:#644a9b;">.warning</span>{}
E<span style="color:#006e28;font-weight:bold;">#myid</span>{}
E <span style="color:#006e28;font-weight:bold;">#myid</span>{}
E,E{}
E, E{}
E ,E{}
E , E{}

p<span style="color:#b08000;font-style:italic;">:nth-child(2)</span> {
	<span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>;
}

<span style="color:#898887;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
body <span style="color:#b08000;font-style:italic;">:not(</span>div<span style="color:#b08000;font-style:italic;">):not(</span>span<span style="color:#b08000;font-style:italic;">)</span> {
	<span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
}

<span style="color:#898887;">/* Elements that are not `.crazy` or `.fancy` */</span>
<span style="color:#898887;">/* Note that this syntax is not well supported yet. */</span>
body <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#644a9b;">.crazy</span>, <span style="color:#644a9b;">.fancy</span><span style="color:#b08000;font-style:italic;">)</span> {
	<span style="font-weight:bold;">font-family</span>: <span style="color:#b08000;">sans-serif</span>;
}

<span style="color:#b08000;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
<span style="color:#b08000;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
<span style="color:#b08000;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
<span style="color:#b08000;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
<span style="color:#b08000;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
<span style="color:#b08000;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
<span style="color:#b08000;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }

<span style="color:#644a9b;">.first</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
<span style="color:#644a9b;">.second</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
<span style="color:#644a9b;">.third</span> span<span style="color:#b08000;font-style:italic;">:nth-of-type(2n+1)</span> {
	<span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">lime</span>;
	unknown-property: <span style="color:#aa5500;">lime</span>;
}

<span style="color:#b08000;font-style:italic;">:root</span>{
	<span style="color:#0057ae;">--foo</span>: if<span style="color:#644a9b;">(</span>x &gt; <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this.width = <span style="color:#b08000;">10</span>; <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
}

<span style="color:#b08000;font-style:italic;">:root</span>,
<span style="color:#b08000;font-style:italic;">:root:lang(en)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;external link&quot;</span>;}
<span style="color:#b08000;font-style:italic;">:root:lang(de)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;externer Link&quot;</span>;}

a<span style="color:#0095ff;font-weight:bold;">[href</span>^=<span style="color:#bf0303;">&quot;http&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span><span style="color:#b08000;font-style:italic;">::after</span> {<span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot; (&quot;</span> <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--external-link</span><span style="color:#644a9b;">)</span> <span style="color:#bf0303;">&quot;)&quot;</span>}

one   { <span style="color:#0057ae;">--foo</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; }
two   { <span style="color:#0057ae;">--bar</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--foo</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
three { <span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--bar</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
<span style="color:#644a9b;">.foo</span> {
	<span style="color:#0057ae;">--gap</span>: <span style="color:#b08000;">20</span>;
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span>px; <span style="color:#898887;">/*20 px*/</span>
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span> * <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/*20px*/</span>
}

foo {
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%- <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">+8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%+ <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -var<span style="color:#644a9b;">(</span>--a<span style="color:#644a9b;">))</span>; <span style="color:#898887;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>*<span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> - <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> + <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> +(<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>)<span style="color:#644a9b;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -(<span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--a</span><span style="color:#644a9b;">)</span>)<span style="color:#644a9b;">)</span>;
}

sweet-alert input<span style="color:#b08000;font-style:italic;">:focus::-moz-placeholder</span> {
	<span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
	<span style="font-weight:bold;">transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
	<span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.5</span>;
}


<span style="color:#ff5500;">@font-feature-values</span> Font One {
	<span style="color:#ff5500;">@styleset</span> {
		nice-style: <span style="color:#b08000;">12</span>;
	}
}

<span style="color:#ff5500;">@font-feature-values</span> Font Two {
	<span style="color:#ff5500;">@styleset</span> {
		nice-style: <span style="color:#b08000;">4</span>;
	}
}

<span style="color:#ff5500;">@counter-style</span> thumbs {
	system: cyclic;
	symbols: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">&quot;</span>;
	suffix: <span style="color:#bf0303;">&quot; &quot;</span>;
}

<span style="color:#ff5500;">@font-face</span> {
	<span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Open Sans&quot;</span>;
	<span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>,
	<span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff&quot;</span><span style="color:#644a9b;">)</span>;
}

<span style="color:#ff5500;">@page</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">cm</span>;
}

<span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:first</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
	<span style="color:#898887;">/* comments */</span>
	<span style="font-weight:bold;">marks</span>: <span style="color:#b08000;">crop</span> <span style="color:#b08000;">cross</span>;
}

<span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:unknown</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
}

<span style="color:#ff5500;">@font-face</span> {
	unknown: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>;
	<span style="color:#898887;">/* comments */</span>
	<span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Bitstream Vera Serif Bold&quot;</span>;
	<span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff&quot;</span><span style="color:#644a9b;">)</span>;
}

<span style="color:#ff5500;">@viewport</span> {
	<span style="font-weight:bold;">zoom</span>: <span style="color:#b08000;">0.75</span>;
	<span style="color:#898887;">/* comments */</span>
	<span style="font-weight:bold;">min-zoom</span>: <span style="color:#b08000;">0.5</span>;
	<span style="font-weight:bold;">max-zoom</span>: <span style="color:#b08000;">0.9</span>;
}

<span style="color:#ff5500;">@viewport</span> {
	<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
	<span style="color:#898887;">/* comments */</span>
	<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
}

<span style="color:#ff5500;">@document</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;https://www.example.com/&quot;</span><span style="color:#644a9b;">)</span> {
	h1 {
		<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
	}
}

<span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span>) {
	div {
		<span style="font-weight:bold;">display</span>: grid;
	}
}

<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>) {
	<span style="color:#644a9b;">.sidebar</span> {
		<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
	}
}

<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;fineprint.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">fineprint.css</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'bluish.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">speech</span>;
<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'custom.css'</span>;
<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;chrome://communicator/skin/&quot;</span><span style="color:#644a9b;">)</span>;
<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;common.css&quot;</span> <span style="color:#b08000;">screen</span>;
<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'landscape.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">landscape</span>);

<span style="color:#ff5500;">@namespace</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/1999/xhtml</span><span style="color:#644a9b;">)</span>;
<span style="color:#ff5500;">@namespace</span> svg <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/2000/svg</span><span style="color:#644a9b;">)</span>;

<span style="color:#ff5500;">@keyframes</span> important1 {
	<span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
	<span style="color:#b08000;">50%</span>  { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; } <span style="color:#898887;">/* ignored */</span>
	<span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
}

<span style="color:#ff5500;">@keyframes</span> important2 {
	<span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>;
		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
	<span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; <span style="color:#898887;">/* ignored */</span>
		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
}

<span style="color:#ff5500;">@keyframes</span> slidein {
	<span style="color:#b08000;">from</span> {
		<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
		<span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>;
	}

	<span style="color:#b08000;">to</span> {
		<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>;
		<span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
	}
}

<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
	a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
	<span style="color:#898887;">/* comments */</span>
	a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
}
</pre></body></html>
